/**
 * Created by Administrator on 2016/7/1.
 */
import React from 'react'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {NavBar, Icon, Toast} from 'antd-mobile'
import {Link} from 'react-router-dom'
import {getNewsDetails, getStoryExtra} from '../actions/home'
// import {HomeList} from "../components/HomeList"
import '../assets/less/home.less'
import zan from '../assets/svg/zan.svg'
import message from '../assets/svg/message.svg'
import collect from '../assets/svg/collect.svg'
import share from '../assets/svg/share.svg'
import collectYellow from '../assets/svg/collect-yellow.svg'

const mapStateToProps = state => (
    {
        home: state.home
    }
)

const mapDispatchTpProps = dispatch => bindActionCreators({
    getNewsDetails,
    getStoryExtra
}, dispatch)

function showToast() {
    Toast.info('此功能没有开放!', 1);
}
/**
 * connect中间件
 * connect一定要写在需要传递参数的组件头部，因为这是语法规则，只对当前关联的组件生效，和java的原理是一致的
 * state用法：state => state（传递全部state）
 * dispatch用法：（单个action）bindActionCreators(navActions, dispatch)，（多个action）bindActionCreators({...action1, ...action2}, dispatch)
 */
class NewsContainer extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isCollect: false
        }
        this.collected = this.collected.bind(this)
        //构造函数用法
        //常用来绑定自定义函数，切记不要在这里或者组件的任何位置setState，state全部在reducer初始化，相信对开发的后期很有帮助
        //例子：this.myfunction = this.myfunction.bind(this)
        // this.handleClick = this.handleClick.bind(this)
    }
    collected () {
        this.setState({isCollect: !this.state.isCollect})
    }
    componentDidMount() {
        const id = this.props.match.params.id
        this.props.getNewsDetails(id)
        this.props.getStoryExtra(id)
    }

    render() {
        const id = this.props.match.params.id
        const {title, body, image, image_source} = this.props.home.newsDetails
        const {comments, popularity} = this.props.home.storyExtra
        return (
            <div className="home-wrapper">
                <NavBar
                    onLeftClick={this.props.history.goBack}
                    mode="dark"
                    rightContent={[
                    <div className="nav-box" key={1}>
                        <span className="icon-box" onClick={showToast}><Icon className="icon-svg" type={share}/></span>
                        <span className="icon-box" onClick={() => this.collected()}>
                            {!this.state.isCollect ? <Icon className="icon-svg" type={collect}/> : <Icon className="icon-svg" type={collectYellow}/>}
                        </span>
                        <Link to={`/comments/${id}`} className="icon-box"><Icon className="icon-svg" type={message}/><span className="icon-num">{comments}</span></Link>
                        <span className="icon-box"><Icon className="icon-svg" type={zan}/><span className="icon-num">{popularity}</span></span>
                    </div>
                    ]}
                ></NavBar>
                 {/*图片*/}
                {
                    image ? <div
                    className="banner-wrap"
                    style={{'backgroundImage': 'url(' + image + ')'}}
                >
                    <p className="banner-title">{title}</p>
                    <p className="image-source">{image_source}</p>
                </div> : ''
                }
                <div className="news-container" dangerouslySetInnerHTML={{__html: body}}></div>
            </div>
        );
    }
}

export default connect(mapStateToProps, mapDispatchTpProps)(NewsContainer)

NewsContainer.propTypes = {
    history: PropTypes.object,
    home: PropTypes.object,
    match: PropTypes.object.isRequired,
    location: PropTypes.object.isRequired
}